// 使用事件委托 直接监听 父元素 这样此组件中的所有 拖拽都会被监听到

let boxDom = document.querySelector('.box')

let source; // 开始拖动的时候记录一下被拖动的节点
boxDom.ondragstart = (e) => {
    // 修改鼠标状态 默认是复制copy
    // 此处我们拿 元素上面的自定义属性 data-xxx effect=copy/move
    e.dataTransfer.effectAllowed = e.target.dataset.effect;

    // e.target 可以拿到所拖拽的元素
    source = e.target;
}

boxDom.ondragover = (e) => {
    // 浏览器默认是不允许元素拖到 div td 之类的元素上面的 所以我们要阻止这个默认事件，使其可被拖入
    e.preventDefault();
}

boxDom.ondragend = (e) => {

}

// 在改颜色之前先清空所有
function clearStyle() {
    // 在改颜色之前先清空所有
    document.querySelectorAll('.drop-over').forEach(node => {
        node.classList.remove('drop-over')
    })
}

// 获取 被拖入元素的根节点 即 此节点已经被拖入的情况下，节点被拖入的时候，需要找到其可被拖入的根节点才行
function getDropNode(node) {
    while (node) {
        if (node.dataset && node.dataset.droptype) {
            return node;
        }
        node = node.parentNode; // 没找到找其父元素
    }
}

boxDom.ondragenter = (e) => {
    clearStyle()

    const dropNode = getDropNode(e.target)

    // 通过元素身上的自定义属性是否可被拖入 data-drop=true 来判断哪些元素可被拖入
    if (dropNode && dropNode.dataset.droptype == e.dataTransfer
        .effectAllowed) {
        dropNode.classList.add('drop-over')
    }
}

boxDom.ondrop = (e) => {
    console.log("77772222222222222---- e---->", e)

    clearStyle();

    const dropNode = getDropNode(e.target)
    console.log("7777 ---dddd---- dropNode---->", dropNode)

    // 类型已知
    console.log('dropNode.dataset.droptype', dropNode.dataset.droptype);
    console.log('e.dataTransfer.effectAllowed', e.dataTransfer.effectAllowed);
    if (dropNode && dropNode.dataset.droptype == e.dataTransfer.effectAllowed) {
        // 此时应该分两种情况 copy move
        if (dropNode.dataset.droptype == 'copy') {
            dropNode.innerHTML = ''; // 清除掉之前此节点内容 使其替换的时候不会出错
            const cloned = source.cloneNode(dropNode);
            cloned.dataset.effect = 'move'; // 使其在再次被拖动的时候 是移动状态
            dropNode.appendChild(cloned);
        }
        // move 即拖回到左侧的时候 删除原有节点
        if (dropNode.dataset.droptype == 'move') {
            source.remove();
        }
    }
    // 右侧拖右侧 做成复制 即拖动元素的effect=move=上面那个判断给的 将要拖入的元素的droptype=copy=由此item小节点默认给的
    else if (dropNode && dropNode.dataset.droptype == 'copy' && e.dataTransfer.effectAllowed == 'move') {
        dropNode.innerHTML = ''; // 清除掉之前此节点内容 使其替换的时候不会出错
        const cloned = source.cloneNode(dropNode);
        cloned.dataset.effect = 'move'; // 使其在再次被拖动的时候 是移动状态
        dropNode.appendChild(cloned);
    }
}


